<template>
    <div class="upload-warp">
        <div class="subtitle-info-wrap" v-if="subtitleObj && typeof subtitleObj === 'object' && Object.keys(subtitleObj).length !== 0">
            <p class="subtitle-name">{{subtitleObj.name || subtitleObj.subtitleName + '.' + subtitleObj.subtitleType}}</p>
            <el-button class="srt-el-button srt-el-button--link srt-el-button-h28 btn" @click="delSubTitle">删除</el-button>
        </div>
        <el-upload
            v-else
            v-model:file-list="fileList"
            :limit="1"
            accept=".srt,.vtt"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :http-request="handleUpload"
        >
            <el-button class="srt-el-button srt-el-button-h28">+添加字幕文件</el-button>
        </el-upload>
        <span class="topic">支持添加.srt格式的字幕文件</span>
    </div>
</template>

<script setup>
import createUploader from '@/lib/uploader-client';
import { ref, watch } from 'vue';

const emit = defineEmits(['update-subtitle'])

const props = defineProps({
    subtitleObj: { // 字幕文件对象
        type: Object,
        default: () => {}
    },
    materialId: { // 素材id
        type: String,
        default: ''
    }
})

const fileList = ref([]);

const tempSubTitleObj = ref({});

const uploadLoading = ref(false);

// 上传字幕之前校验
function beforeUpload (file) {
    let currentFile = {};
    if (typeof file === 'object') {
        currentFile = file
    } else {
        currentFile = file[0];
    }
    //获取最后一个.的位置
    let index= currentFile.name.lastIndexOf(".");
    //获取后缀
    let ext = currentFile.name.substr(index + 1);
    if (ext !== 'srt' && ext !== 'vtt') {
        G_dispatchEvent('toast', { message: '请上传srt或vtt格式的字幕文件', type: 'error'})
        return false;
    }
}

// 上传字幕
async function handleUpload (param) {
    const uploadClient = await createUploader();
    let currentFile = {};
    if (typeof param.file === 'object') {
        currentFile = param.file
    } else {
        currentFile = param.file[0];
    }
    uploadLoading.value = true;

	uploadClient.start(currentFile, 'file', {
		onProgress: () => { },
		onSuccess: ({ data }) => {
            //获取最后一个.的位置
            let index= data.name.lastIndexOf(".");
            //获取后缀
            let name = data.name.substr(0, index);
            emit('update-subtitle', {
                ...data, 
                fullUrl: `${data.host}/${data.url}`,
                nameWithoutSuffix: name // 不带后缀的名字
            })
            uploadLoading.value = false;
		},
		onError: () => {
            uploadLoading.value = false;
        }
	});

}

// 字幕保存与删除
function subtitleSave(insertList, deleteList) {
    G_transmit('subtitleSave', {
        data: {
            insertList: insertList,
            deleteList: deleteList
        }
    })
    .then((res) => {
    }).catch((_err) => {
    })
}

function delSubTitle () {
    fileList.value = [];
    // if (props.materialId && props.subtitleObj.subtitleId) {
    //     subtitleSave([], [props.subtitleObj.subtitleId]);
    // }
    emit('update-subtitle', null);
}
</script>

<style lang="scss" scoped>
.upload-warp{
    display: flex;
    align-items: center;
    .topic{
        font-size: 14px;
        color: #666666;
        margin-left: 12px;
    }

}
.subtitle-info-wrap {
    display: flex;
    align-items: center;
    .subtitle-name {
        max-width: 70%;
        color: #000000;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .btn {
        margin-left: 20px;
    }
}
</style>